$(function() {
    // 由于导航条会抖动 设置节流阀 互斥锁
    let flag = true;

    $(window).scroll(function() {
        // 1.页面滚动到固定位置 通栏和电梯条出现
        // 思路：window页面滚动scroll触发 判断页面document滚动scroolTop 是否大于clean板块自身的offset top
        // 如果大于电梯条 淡入fadeIn显示 否则淡出fadeOut
        if ($(document).scrollTop() >= $('.clean').offset().top) {
            $('.tTop').fadeIn(800);
            $(".fixedtool").fadeIn(800);
        } else {
            $('.tTop').fadeOut(800);
            $(".fixedtool").fadeOut(800);
        }

        // 4.页面滚动到对应的大盒子 电梯条对应的显示
        if (flag) {
            $('.clearAll').children().each(function(i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top - 150) {
                    $('.fixedtool ul>li').eq(i).addClass('current').siblings().removeClass()
                }
            })
        }
    })

    // 2.点击电梯条li 显示至对应大盒子
    // 思路：根据电梯条li的索引 找到同索引大盒子 让页面滚动当前大盒子的自身页面高度
    $('.fixedtool ul>li').click(function() {
        flag = false;
        // $h = $('.clearAll').children()[$(this).index()].offsetTop; //js获取方法
        $h = $('.clearAll').children().eq($(this).index()).offset().top;
        //   让页面元素滚动
        $("body,html").stop().animate({
                scrollTop: $h
            }, function() {
                flag = true;
            })
            // 3.排他思想 当前添加高亮类 其他兄弟移除
        $(this).addClass('current').siblings().removeClass()
    })

    // 5.点击 回到顶部 给body,html 添加动画 
    // 让其sccrollTop 1秒过渡到顶部盒子的自身scrollTop值 更简版设置scrollTop为0
    $('.fixedtool div>li').click(function() {
        $("body,html").stop().animate({
                scrollTop: 0
            }, 1000)
            // $("body,html").scrollTop('0px') 直接设置滚动距离
    })
})